import { onMounted, ref, unref, nextTick } from 'vue'
import { supermapReady } from '/@packages/components'
import { TreeInstance } from 'element-plus'

export default function () {
  //图层数数据
  const layers = ref<any[]>([])
  //引入全局的viewer
  const { $myapp } = supermapReady()
  // 组件挂载方法
  onMounted(async () => {
    layers.value = []
    layers.value.push({
      id: 1,
      label: '模型图层',
      children: []
    })
    layers.value.push({
      id: 2,
      label: '影像图层',
      children: []
    })
    layers.value.push({
      id: 3,
      label: '地形图层',
      children: []
    })
    const layerIndex = $myapp.viewer.imageryLayers.length

    // 加载高德影像地图
    const imglayer = $myapp.viewer.imageryLayers.addImageryProvider(
      new SuperMap3D.UrlTemplateImageryProvider({
        url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
        minimumLevel: 3,
        maximumLevel: 20
      }),
      layerIndex
    )
    layers.value[1].children.push({
      id: layers.value[1].id + '-' + layers.value[1].children.length,
      label: '高德影像',
      checked: imglayer.show,
      layerIndex: layerIndex,
      layerType: 'image'
    })
    // 打开三维服务场景
    // const promise = await $myapp.viewer.scene.open(
    //   'http://172.16.15.64:8090/iserver/services/3D-SDC/rest/realspace'
    // )
    //
    // 打开问题盘三维服务场景
    // const promise = await $myapp.viewer.scene.open(
    //   'http://172.16.15.64:8091/iserver/services/3D-SDCWenTiPan/rest/realspace'
    // )
    // 使用多子域方式打开场景
    const promise = await $myapp.viewer.scene.open(
      'http://{s}/test/myserver/services/3D-SDC/rest/realspace',
      'SDC',
      {
        subdomains: [
          '172.16.15.64:8081',
          '172.16.15.64:8082',
          '172.16.15.64:8083'
        ] //设置子域
      }
    )
    // 使用多子域加载合并图层的场景
    // const promise = await $myapp.viewer.scene.open(
    //   'http://{s}/test/myserver/services/3D-SDC/rest/realspace',
    //   'SDCHB',
    //   {
    //     subdomains: [
    //       '172.16.15.64:8081',
    //       '172.16.15.64:8082',
    //       '172.16.15.64:8083'
    //     ] //设置子域
    //   }
    // )

    promise.forEach((layer: any) => {
      if (layer.name && layer.name !== 'BuildingPart') {
        layer.selectEnabled = false
      }
      //将地形图层追加到图层树
      if (layer._isSct) {
        layers.value[2].children.push({
          id: layers.value[2].id + '-' + layers.value[2].children.length,
          label: layer.tablename,
          layerName: layer.tablename,
          checked: layer.visible,
          layerType: 'sct'
        })
      }
      //将模型图层追加到图层树
      else if (layer._isS3MB) {
        layers.value[0].children.push({
          id: layers.value[0].id + '-' + layers.value[0].children.length,
          label: layer.name,
          layerName: layer.name,
          checked: layer.visible,
          layerType: 's3mb'
        })
      }
      // 判断是合并图层
      else if (layer._s3mLayers) {
        layers.value[0].children.push({
          id: layers.value[0].id + '-' + layers.value[0].children.length,
          label: layer._name,
          layerName: layer._name,
          checked: layer.visible,
          layerType: 's3mb'
        })
      }
    })
    // 需要添加该方法后,才能正常设置图层树的状态
    await nextTick()
    setDefaultCheckdNode(layers.value)
    console.log('promise======', promise)
  })
  // el-tree的ref
  const myTreeRef = ref<TreeInstance>()
  // 设置图层数默认选中风格
  const setDefaultCheckdNode = (node: any) => {
    if (Array.isArray(node)) {
      node.forEach((item) => {
        if (item.checked) {
          myTreeRef.value!.setChecked(item.id, true, false)
        }
        if (item.children) {
          setDefaultCheckdNode(item.children)
        }
      })
    }
  }
  // 点击check复选框时,显隐图层
  const onNodeCheckChange = (
    data: any,
    checked: boolean,
    childCheck: boolean
  ) => {
    switch (data.layerType) {
      case 's3mb':
        setS3MBLayerVisible(data.layerName, checked)
        break
      case 'sct':
        setTerrainVisible(checked)
        break
      case 'image':
        setImageryVisible(data.layerIndex, checked)
        break
    }
  }
  // 设置模型图层显隐
  const setS3MBLayerVisible = (layername: string, visible: boolean) => {
    $myapp.viewer.scene.layers.find(layername)!.visible = visible
  }
  // 设置地形图层显隐
  const setTerrainVisible = (visible: boolean) => {
    $myapp.viewer.terrainProvider.visible = visible
  }
  // 设置影像图层显隐
  const setImageryVisible = (layerIndex: number, visible: boolean) => {
    $myapp.viewer.imageryLayers.get(layerIndex)!.show = visible
  }
  return {
    layers,
    myTreeRef,
    onNodeCheckChange
  }
}
